<template>
  <div class="home_box">
    <mars-td ref="mapspc" @PopUp="handleDataFromMars3D"></mars-td>
    <!-- 左 -->
    <div class="column" style="left: 0.16rem">
      <!-- 设备情况 -->
      <div class="left_top">
        <div class="top_box">
          <p class="p1">设备情况</p>
        </div>
        <div class="lefttop_foot">
          <div class="box_img">
            <div>
              <img src="../assets/nljk-img/sxt-zx.png" alt="" />
              <div class="box_txt">
                <p class="txt1">摄像头在线数量</p>
                <p style="color: rgba(18, 251, 140, 1); font-size: 0.18rem">
                  {{ Vonline }}
                </p>
              </div>
            </div>
            <div>
              <img src="../assets/nljk-img/sxt-lx.png" alt="" />
              <div class="box_txt">
                <p class="txt1">摄像头离线数量</p>
                <p style="color: rgba(217, 217, 217, 1); font-size: 0.18rem">
                  {{ Voffline }}
                </p>
              </div>
            </div>
            <div>
              <img src="../assets/nljk-img/spts.png" alt="" />
              <div class="box_txt">
                <p class="txt1">视频条数</p>
                <p style="color: rgba(60, 237, 255, 1); font-size: 0.18rem">
                  {{ Vnum }}
                </p>
              </div>
            </div>
          </div>
          <div class="box_img">
            <div>
              <img src="../assets/nljk-img/swzx.png" alt="" />
              <div class="box_txt">
                <p class="txt1">声纹在线数量</p>
                <p style="color: rgba(18, 251, 140, 1); font-size: 0.18rem">
                  {{ Sonline }}
                </p>
              </div>
            </div>
            <div>
              <img src="../assets/nljk-img/swlx.png" alt="" />
              <div class="box_txt">
                <p class="txt1">声纹离线数量</p>
                <p style="color: rgba(217, 217, 217, 1); font-size: 0.18rem">
                  {{ Soffline }}
                </p>
              </div>
            </div>
            <div>
              <img src="../assets/nljk-img/swts.png" alt="" />
              <div class="box_txt">
                <p class="txt1">声纹条数</p>
                <p style="color: rgba(60, 237, 255, 1); font-size: 0.18rem">
                  {{ Snum }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 今日监测 -->
      <div class="left_center">
        <div class="top_box">
          <p class="p1">今日监测</p>
        </div>
        <div class="leftcenter_foot">
          <mycharts :option="option1" height="90%" wdith="4rem"></mycharts>
        </div>
      </div>
      <!-- 今日各时段物种活跃度 -->
      <div class="left_foot">
        <div class="top_box">
          <p class="p1">今日各时段物种活跃度</p>
        </div>
        <div class="leftfoot_foot">
          <mycharts :option="option2" height="90%" wdith="4rem"></mycharts>
        </div>
      </div>
    </div>
    <!-- 右 -->
    <div class="column" style="right: 0.16rem">
      <!-- 今日动态 -->
      <div class="right_center">
        <div class="top_box">
          <p class="p1">
            今日动态(<span style="color: rgba(60, 237, 255, 1)">{{ tot }}条</span>)
          </p>
        </div>
        <div class="right_center_foot" ref="scrollContainer">
          <div class="Dynamic_box" v-for="(item, index) in otherData" :key="index">
            <div class="left_img">
              <img src="../../src/assets/nljk-img/dw.png" alt="" />
              <span>{{ new Date(item.occurTime).toLocaleTimeString() }}</span>
            </div>
            <div class="centers">
              <span>{{ item.bizTag }}-{{ item.deviceName }}</span>
              <div class="center_img2" v-if="item.list.type == 1">
                <video :src="item.list.discernPath" controls :controls="true" width="100%" height="100%"
                  :autoplay="false"></video>
              </div>
              <div class="center_img" v-if="item.list.type == 2">
                <div class="img_box" @click.stop="playAudio(item.list)">
                  <div class="img_box_left">
                    <img :src="isplay == item.list.id ? audiongif : audion" alt="" />
                  </div>
                  <div class="img_box_right">
                    <span>{{ item.duration }}</span>
                    <img :src="isplay == item.list.id ? zt : bf" alt="" />
                  </div>
                </div>
                <!-- <audio :src="item.list.videoUrl" controls></audio> -->
              </div>
            </div>
            <div class="right_img" @click="btn_point(item)">
              <img src="../../src/assets/nljk-img/dingwei.png" alt="" />
            </div>
          </div>
        </div>
      </div>

      <div class="right_top">
        <div class="top_box">
          <p class="p1">重点物种动态</p>
        </div>
        <!-- 重点物种动态 -->
        <div class="righttop_foot">
          <el-carousel :autoplay="false" height="100%">
            <el-carousel-item v-for="(item, index) in videoData" :key="index">
              <div class="video_box">
                <!-- 播放按钮遮罩层 -->
                <div class="play_mask" @click="startPlaying(item)" v-if="item.playMaskShow"></div>
                <video :src="item.videoPath" :controls="true" width="100%" :autoplay="true"></video>
              </div>
              <div class="video_txt">
                <p>{{ item.speciesName }}</p>
                <p>{{ item.latinName }}</p>
                <p>
                  <span class="video_span_title">保护等级：</span>{{ item.speciesLevel }}
                </p>
                <p>
                  <span class="video_span_title">今日识别次数：</span>{{ item.todayNumber }}
                </p>
                <p>
                  <span class="video_span_title">累计识别数量：</span>{{ item.yearNumber }}
                </p>
                <p>
                  <span class="video_span_title">始见日：</span>{{ item.startDay }}
                </p>
                <p>
                  <span class="video_span_title">终见日：</span>{{ item.endDay }}
                </p>
                <p>
                  <span class="video_span_title">拍摄高峰期：</span>{{ item.highestMonth }}
                </p>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
  </div>
  <!-- 监控画面 B-->
  <div class="cldc" v-if="Isaids">
    <div class="cloudControl">
      <div class="cl_Title">
        <span>监控点位-{{ aidsname }}</span>
        <div class="cl_close" @click.stop="btn_edit">
          <img :src="CloseIcon" alt="" />
        </div>
      </div>

      <div class="cl_video">
        <div class="nav_box">
          <div class="nav_left">
            <div style="width: 0.8rem" v-for="item in navData" :key="item.name" @click="btn_toggle(item.id)"
              :class="item.id == flag ? 'Select' : ''">
              {{ item.name }}
            </div>
          </div>
          <div class="nav_right" v-show="flag == 2">
            <p>
              总计监测事件:<span style="color: rgba(60, 237, 255, 1)">{{ article }}条</span>
            </p>
            <el-date-picker v-model="value2" type="year" placeholder="请选择日期" @panel-change="getYear"
              :disabled-date="pickerOptions" :clearable="false" />
          </div>
        </div>
        <div class="bigVideo" v-show="flag == 0">
          <video :src="jkUrl" controls autoplay></video>
        </div>
        <div class="cl_set" v-show="flag == 0">
          <div @mousedown.left="Czi('ZOOM_IN')" @mouseup.left="Czi('stop')">
            <img :src="ZoomIn" alt="" />
          </div>
          <div @mousedown.left="Czi('ZOOM_OUT')" @mouseup.left="Czi('stop')">
            <img :src="ZoomOut" alt="" />
          </div>
          <div @click.stop="IsCll = !IsCll">
            <img :src="IsCll ? control : control2" alt="" />
            <!-- <span style="margin-left: .08rem;">控制台</span> -->
          </div>
        </div>
        <div class="controller" v-if="IsCll" v-show="flag == 0">
          <img :src="controller" alt="" />
          <div class="c_t" @mousedown.left="Czi('UP')" @mouseup.left="Czi('stop')"></div>
          <div class="c_b" @mousedown.left="Czi('DOWN')" @mouseup.left="Czi('stop')"></div>
          <div class="c_l" @mousedown.left="Czi('LEFT')" @mouseup.left="Czi('stop')"></div>
          <div class="c_r" @mousedown.left="Czi('RIGHT')" @mouseup.left="Czi('stop')"></div>
        </div>

        <div class="bigVideo bigcenter" v-show="flag == 1" v-if="monitorData.length > 0">
          <el-table :data="monitorData" style="width: 100%; z-index: 100">
            <el-table-column label="图片">
              <template #default="scope">
                <div class="demo-image__preview">
                  <img :src="scope.row.bizContent.imageUrl" alt="" style="width: 1rem; height: 1rem"
                    @click="btn_cks(scope.row)" />
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="bizTag" label="物种">
              <template #default="scope">
                <span>{{
                  scope.row.bizTag == "" ? "暂无物种名称..." : scope.row.bizTag
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="拍摄时间">
              <template #default="{ row }">
                <span>{{ new Date(row.occurTime).toLocaleString() }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="bizContent.reliability" label="可信度" />
            <el-table-column prop="title" label="动态分类" />
            <el-table-column prop="bizContent.eventType" label="动态等级" />
          </el-table>
          <el-pagination v-model:current-page="pageIndex" v-model:page-size="pageSize"
            layout="total , sizes, prev, pager, next, jumper" :page-sizes="[5, 10, 20, 100]" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
        <div class="bigVideo bigfoot" v-show="flag == 2">
          <div class="center">
            <div>
              <div class="bigtop">
                <p class="p1">各物种监测数量</p>
              </div>
              <div class="top_foot">
                <mycharts width="8.39rem" :height="myheight" :option="option3" v-if="quantity.length > 0"></mycharts>
              </div>
            </div>
            <div>
              <div class="bigtop">
                <p class="p1">各保护级别监测数量</p>
              </div>
              <div class="top_foot">
                <mycharts width="4.19rem" :height="myheight" :option="option4" v-if="scaledata.length > 0"></mycharts>
              </div>
            </div>
          </div>
          <!-- 中 -->
          <div class="center divs">
            <div>
              <div class="bigtop">
                <p class="p1">每月监测数量</p>
              </div>
              <div class="top_foot">
                <mycharts width="8.39rem" height="2rem" :option="option5"></mycharts>
              </div>
            </div>
            <div>
              <div class="bbt">
                <p class="p1">IUCN名录监测数量</p>
              </div>
              <div class="top_foot">
                <mycharts width="4.19rem" height="2rem" :option="option6"></mycharts>
              </div>
            </div>
          </div>
          <!-- 下 -->
          <div class="foot">
            <div class="bbt">
              <p class="p1">各物种停留时间统计</p>
            </div>
            <div class="top_foot">
              <mycharts width="12.8rem" :height="myheight" :option="option7"></mycharts>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <el-image-viewer v-if="showImagePreview" :url-list="showsrcListref" teleported @close="closePreview"
    style="z-index: 3000" />
  <ai :msg="aiData" @Closeaip="Closeai" v-if="IsAi" />
  <PopUp @Pop="ClosePop" v-if="IsPop" :msg="PopObj" />

  <!-- 设备开关B -->
  <div class="nav_boxbf">
    <div class="lis" v-for="i in nbbf" :key="i.id" :style="{ color: i.stas ? '#3cedff' : '#ccc' }"
      @click.stop="onoff(i)">
      <div class="lis_img">
        <img :src="i.stas ? i.icon : i.icon2" alt="" />
      </div>
      <span style="line-height: 25px">{{ i.value }}</span>
      <div style="margin-bottom: 5px">
        <span style="font-size: 26px">{{ i.num }}</span>
        <span>{{ i.unit }}</span>
      </div>
    </div>
  </div>
  <img
    :src="!isSwsjOn ? noswsj : yesswsj"
    alt=""
    class="swsj_img"
    @click="!isSwsjOn ? btn_noswsj() : btn_yesswsj()"
  />
  <!-- 设备开关E -->
</template>

<script setup>
import * as echarts from "echarts";
import { ElMessage } from "element-plus";
import { onMounted, ref, onUnmounted, reactive } from "vue";
import { useInfiniteScroll } from "@vueuse/core";
import {
  getTodayMonitorApi,
  getMonthApi,
  NewgetPtzControlApi2,
  NewgetPtzControlApi3,
  getICUNApi,
  getTodayNoticesApi,
  plays,
  getDeviceApi,
  getDynamicStatApi,
  getTodayActiveApi,
  getKeySpeciesApi,
  getDeviceTotalCountApi,
  getMapLayerApi,
  getWebDevicesApi,
  getplay,
  getPtzControlApi,
  getDeviceMonitorApi,
  getDeviceMonitorCountApi,
  getCategoryApi,
  getLevelApi,
  getDeviceMonthCountApi,
} from "../utils/api.js";
import CloseIcon from "@/assets/CloseIcon.svg";
import xn from "@/assets/xn.svg";
// import CloseIcon from '@/assets/CloseIcon.svg'
import controller from "@/assets/controller.svg";
import control from "@/assets/control.svg";
import control2 from "@/assets/control2.svg";
import ZoomIn from "@/assets/zoomin.svg";
import ZoomOut from "@/assets/zommout.svg";
import mycharts from "@/components/mycharts.vue";
import marsTd from "@/components/mars3d.vue";
import ai from "@/components/ai.vue";
import PopUp from "@/components/PopUp.vue";
import jk from "@/assets/img/jk.png";
import sw from "@/assets/nljk-img/shengwen.png";
import audiongif from "@/assets/img/bf.gif";
import audion from "@/assets/img/swys.png";
import bf from "@/assets/img/bofang.png";
import zt from "@/assets/img/zanting.png";
import noswsj from "@/assets/img/noswsj.png";
import yesswsj from "@/assets/img/yesswsj.png";
let isSwsjOn = ref(false);
let value3 = ref("2024");
let value2 = ref("");
let showsrcListref = ref([]);
const moveable = ref([]);
let showImagePreview = ref(false);
let mapspc = ref(null);
let Isaids = ref(false);
let jkUrl = ref(null);
let flag = ref(0);
let pageIndex = ref(1);
let pageI = ref(1);
let ptz = ref(null);
let pageSize = ref(5);
let pageS = ref(5);
let IsCll = ref(false);
let navData = reactive([
  { name: "实时画面", id: 0 },
  { name: "监测事件", id: 1 },
  { name: "监测动态", id: 2 },
]);
let isRotating = ref(false);
let needle = ref("");
let aplayerContainer = ref(null);
let aplayerInstance = ref(null);
import nav1 from "@/assets/icon/renleiniaoleijiankong.svg";
import nav2 from "@/assets/icon/shengwenshebei.svg";
import nav1s from "@/assets/icon/renleiniaoleijiankong2.svg";
import nav2s from "@/assets/icon/shengwenshebei2.svg";
const nbbf = ref([
  {
    id: "dbsh01jwj",
    icon: nav1,
    icon2: nav1s,
    stas: true,
    value: "鸟类监控",
    name: "鸟类监控",
    num: 0,
    unit: "台",
  },
  {
    id: "fhduihfsdu9282jq",
    icon: nav2,
    icon2: nav2s,
    stas: true,
    value: "鸟类声纹",
    name: "鸟类声纹",
    num: 0,
    unit: "台",
  },
]);
let videoData = ref([]);
const startPlaying = (e) => {
  e.playMaskShow = false;
  let Media = document.getElementById(e.id);
  Media.play();
};
let observer = null;
let jayData = ref([]);
// 监测动态
let otherData = ref([]);
let monitorData = ref([]);
let PATH_URL = "http://123.150.5.131:9999";
// let PATH_URL = 'http://192.168.1.27:9999'
// 人类和鸟类监控
let webcams = ref([]);
let birdList = ref([]);
let areaId;
let username;
let manageSite;
// let intervalId = ref(null);
let viewportHeight = ref(window.innerHeight);
let myheight = ref("2rem");
function handleResize() {
  viewportHeight.value = window.innerHeight;
  // console.log(viewportHeight.value, "高度");
  if (viewportHeight.value == 1080) {
    myheight.value = "2.3rem";
  } else {
    myheight.value = "2rem";
  }
}
onMounted(() => {
  areaId = window.sessionStorage.getItem("areaId");
  username = window.sessionStorage.getItem("username");
  manageSite = window.sessionStorage.getItem("manageSite");
  // console.log(areaId);
  getlayerList();
  getFacility();
  getEquipment(); // 设备情况
  getToday(); // 今日监测
  getActivity(); // 今日物种活跃度
  getSpecies(); // 重点物种
  getNews(); // 今日动态
  getDynamic(); // 动态统计
  // 设置定时器
  // 设置定时器，每隔三十秒执行一次 geturgent 函数
  // intervalId.value = setInterval(geturgent, 30000);
  window.addEventListener("resize", handleResize);
  value2.value = new Date().getFullYear() + "";
});
// 查看大图
const btn_cks = (a) => {
  showImagePreview.value = true;
  showsrcListref.value.unshift(a.bizContent.imageUrl);
};
// 关闭大图
const closePreview = () => {
  showImagePreview.value = false;
  showsrcListref.value = [];
};
// 图层
const getlayerList = async () => {
  let res = await getMapLayerApi(areaId);
  console.log(res, "图层");
  if (res.data.code == 200) {
    let wms = res.data.data.wms;
    // 七里海
    let itemIdToFind = "qilihai_waibianjie";
    // 硅化木
    // let itemIdToFind = 'pg_bianjie';
    const item = wms.find((item) => item.id === itemIdToFind);
    let arr = item;
    let arrID = item.id;
    mapspc.value.addwms(arrID, arr);
  }
};
// 获取设备
const getFacility = async () => {
  let res = await getWebDevicesApi(manageSite, username);
  console.log(res , 'shebei');
  
  if (res.data.code == 200) {
    if (res.data.data.humanBirdDevices.length > 0) {
      webcams.value = res.data.data.humanBirdDevices;
      birdList.value = res.data.data.voiceDevices;
      let moveable1 = [],
        moveable2 = [];
      webcams.value.forEach((e) => {
        if (e.moveable == 1) {
          moveable1.push(e);
        } else {
          moveable2.push(e);
        }
      });
      nbbf.value[0].num = moveable2.length;
      nbbf.value[1].num = birdList.value.length;
      moveable.value = moveable2;
      mapspc.value.adddevices("mynljk001", moveable2, jk);
      mapspc.value.adddevices("mysw001", birdList.value, sw); //deldevices
    }
  }
};

const onoff = (data) => {
  data.stas = !data.stas;
  if (data.stas) {
    if (data.name == "鸟类监控") {
      mapspc.value.adddevices("mynljk001", moveable.value, jk);
    } else {
      mapspc.value.adddevices("mysw001", birdList.value, sw);
    }
  } else {
    if (data.name == "鸟类监控") {
      mapspc.value.deldevices("mynljk001");
    } else {
      mapspc.value.deldevices("mysw001");
    }
  }
};
onUnmounted(() => {
  // if (intervalId.value) {
  //   clearInterval(intervalId); // 清除定时器
  // }
  window.removeEventListener("resize", handleResize);
});
let aiData = ref({});
let IsAi = ref(false);
let IsPop = ref(false);
let PopObj = ref({});
let channelNumber = "";
let serialNumbers = "";
let aidsname = ref("");
const handleDataFromMars3D = (data) => {
  // console.log(data);
  if (data.type == "AI") {
    aiData.value = data.pb;
    IsAi.value = true;
  }
  if (data.type == "详情") {
    if (data.pb.notices.length <= 0) {
      ElMessage({
        message: data.pb.deviceName + "该设备暂无近期事件",
        type: "warning",
      });
    } else {
      IsPop.value = true;
      PopObj.value = data;
    }
  }
  if (data.type == "鸟类详情") {
    if (data.pb.notices.length <= 0) {
      ElMessage({
        message: data.pb.deviceName + "该设备暂无近期事件",
        type: "warning",
      });
    } else {
      IsPop.value = true;
      PopObj.value = data;
    }
  }
  if (data.type == "查看") {
    mtaids(data);
  }
};
const Closeai = () => {
  IsAi.value = false;
};
const ClosePop = () => {
  IsPop.value = false;
};
// 左
// 设备情况
let Voffline = ref([]); // 摄像头离线数量
let Vonline = ref([]); // 摄像头在线数量
let Vnum = ref([]); // 视频条数
let Soffline = ref([]); // 声纹离线线数量
let Sonline = ref([]); // 声纹在线线数量
let Snum = ref([]); // 声纹在线数量
const getEquipment = async () => {
  let res = await getDeviceApi();
  Voffline.value = res.data.data.videoOfflineNumber;
  Vonline.value = res.data.data.videoOnlineNumber;
  Vnum.value = res.data.data.videoNumber;
  Soffline.value = res.data.data.voiceOfflineNumber;
  Sonline.value = res.data.data.voiceOnlineNumber;
  Snum.value = res.data.data.voiceNumber;
  // console.log(res , '设备情况');
};
// 今日监测
const getToday = async () => {
  let res = await getTodayMonitorApi();
  // 累计监测
  option1.series[0].data[0].value = res.data.data.total;
  // 国家一级
  option1.series[1].data[0].value = res.data.data.inumber;
  option1.series[1].data[1].value = res.data.data.total;
  // 国家二级
  option1.series[2].data[0].value = res.data.data.iiNumber;
  option1.series[2].data[1].value = res.data.data.total;
};
const option1 = reactive({
  title: [
    {
      text: "累计监测个体数量",
      left: "17%",
      top: "80%",
      textAlign: "center",
      textStyle: {
        fontWeight: "normal",
        fontSize: ".16rem",
        color: "#AAAFC8",
        textAlign: "center",
      },
    },
    {
      text: "国家Ⅰ级",
      left: "48%",
      top: "80%",
      textAlign: "center",
      textStyle: {
        color: "#AAAFC8",
        fontWeight: "normal",
        fontSize: ".16rem",
        textAlign: "center",
      },
    },
    {
      text: "国家Ⅱ级",
      left: "80%",
      top: "80%",
      textAlign: "center",
      textStyle: {
        color: "#AAAFC8",
        fontWeight: "normal",
        fontSize: ".16rem",
        textAlign: "center",
      },
    },
  ],
  series: [
    {
      name: "第一个圆环",
      type: "pie",
      clockwise: false,
      radius: ["65%", "45%"],
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      shadowBlur: 0,
      center: ["18%", "40%"],
      data: [
        {
          value: 25,
          value: 0,
          label: {
            normal: {
              rich: {
                a: {
                  color: "#FA89A4",
                  align: "center",
                  fontSize: ".14rem",
                  fontWeight: "bold",
                },
                b: {
                  color: "#fff",
                  align: "center",
                  fontSize: ".14rem",
                },
              },
              formatter: function (params) {
                return "{a|" + params.value + "只/次}";
              },
              position: "center",
              show: true,
              textStyle: {
                fontSize: ".16rem",
                fontWeight: "normal",
                color: "#fff",
              },
            },
          },
          itemStyle: {
            color: "#FA89A4",
            shadowColor: "#2c6cc4",
            shadowBlur: 0,
          },
        },
        {
          // value: 75,
          value: 0,
          name: "invisible",
          itemStyle: {
            color: "rgba(255, 255, 255, 0.3)",
            emphasis: {
              color: "#24375c",
            },
          },
        },
      ],
    },
    {
      name: "第二个圆环",
      type: "pie",
      clockwise: false,
      radius: ["65%", "45%"],
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      shadowBlur: 0,
      center: ["50%", "40%"],
      data: [
        {
          // value: 50,
          value: 0,
          label: {
            normal: {
              rich: {
                a: {
                  color: "#FCD60F",
                  align: "center",
                  fontSize: ".14rem",
                  fontWeight: "bold",
                },
                b: {
                  color: "#fff",
                  align: "center",
                  fontSize: ".14rem",
                },
              },
              formatter: function (params) {
                return "{a|" + params.value + "只/次}";
              },
              position: "center",
              show: true,
              textStyle: {
                fontSize: ".16rem",
                fontWeight: "normal",
                color: "#fff",
              },
            },
          },
          itemStyle: {
            color: "#FCD60F",
            shadowColor: "#FCD60F",
            shadowBlur: 0,
          },
        },
        {
          // value: 50,
          value: 0,
          name: "invisible",
          itemStyle: {
            color: "rgba(255, 255, 255, 0.3)",
            emphasis: {
              color: "#412a4e",
            },
          },
        },
      ],
    },
    {
      name: "第三个圆环",
      type: "pie",
      clockwise: false,
      radius: ["65%", "45%"],
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      shadowBlur: 0,
      center: ["82%", "40%"],
      data: [
        {
          // value: 75,
          value: 0,
          label: {
            normal: {
              rich: {
                a: {
                  color: "#0AD0A1",
                  align: "center",
                  fontSize: ".14rem",
                  fontWeight: "bold",
                },
                b: {
                  color: "#fff",
                  align: "center",
                  fontSize: ".14rem",
                },
              },
              formatter: function (params) {
                return "{a|" + params.value + "只/次}";
              },
              position: "center",
              show: true,
              textStyle: {
                fontSize: ".16rem",
                fontWeight: "normal",
                color: "#fff",
              },
            },
          },
          itemStyle: {
            color: "#0AD0A1",
            shadowColor: "#613fd1",
            shadowBlur: 0,
          },
        },
        {
          // value: 25,
          value: 0,
          name: "invisible",
          itemStyle: {
            color: "rgba(255, 255, 255, 0.3)",
            emphasis: {
              color: "#453284",
            },
          },
        },
      ],
    },
  ],
});
// 今日各时段物种活跃度
const getActivity = async () => {
  let res = await getTodayActiveApi();
  // console.log(res, "今日各时段物种活跃度");
  option2.xAxis[0].data = res.data.data.hours;
  option2.series[0].data = res.data.data.species;
};
const option2 = reactive({
  tooltip: {
    trigger: "axis",
    formatter: function (params) {
      // 自定义显示内容
      // params 是一个包含当前数据信息的数组
      let result = params[0].name + "点" + "<br/>";
      params.forEach(function (item) {
        result += item.marker + item.value + "只/次";
      });
      return result;
    },
  },
  title: {
    text: "(单位:只/次)",
    // left: ,
    textStyle: {
      color: "rgba(255, 255, 255, 0.80)",
      fontSize: ".12rem",
    },
  },
  grid: {
    top: "12%",
    right: "3%",
    left: "12%",
    bottom: "25%",
  },
  xAxis: [
    {
      type: "category",
      color: "#59588D",
      // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      data: [],
      axisPointer: {
        type: "line",
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        interval: 0,
        color: "rgba(255, 255, 255, 0.80)",
        fontSize: ".12rem",
      },
      lineStyle: {
        color: "rgba(255, 255, 255, 0.80)",
        width: 1,
        type: "solid",
      },
    },
  ],
  yAxis: [
    {
      // min: 0,
      // max: 100,
      axisLabel: {
        show: true,
        interval: 0,
        color: "rgba(255, 255, 255, 0.80)",
        fontSize: ".12rem",
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: "#40658c",
        },
      },
    },
  ],
  dataZoom: [
    {
      //添加dataZoom属性即可显示滑动条S
      orient: "horizontal",
      show: true, //控制滚动条显示隐藏
      realtime: true, //拖动滚动条时是否动态的更新图表数据
      handleSize: 0,
      height: "3%", //滚动条高度
      start: 0, //滚动条开始位置（共6等份）
      end: 60, //滚动条结束位置
      top: "82%",
      // bottom: '20%',
      left: "9%", //滚动条靠左侧的百分比
      zoomLock: false, //控制面板是否进行缩放
      startValue: 0, // 从头开始。
      endValue: 5, // 一次性展示6个
      showDetail: false, // 关闭滚动条提示
      backgroundColor: "rgb(63, 116, 168 , 0.5)",
      fillerColor: "rgba(255, 255, 255,0.5)",
      zoomLock: true,
      zoomOnMouseWheel: false,
      brushSelect: false,
      showDetail: false,
      showDataShadow: false,
    },
  ],
  series: [
    {
      type: "bar",
      data: [],
      barWidth: "20%",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "rgba(18, 251, 140, 1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(18, 251, 140, 0.1)", // 100% 处的颜色
            },
          ],
          false
        ),
        borderRadius: [30, 30, 0, 0],
      },
    },
  ],
});
// 右
// 重点物种动态
const getSpecies = async () => {
  let res = await getKeySpeciesApi();
  console.log(res, "重点物种状态");
  if (res.data.code == 200) {
    videoData.value = res.data.data;
  }
};
// 今日动态
// let tot = ref(0);
// const getNews = async () => {
//   let res = await getTodayNoticesApi(pageI.value, pageS.value);
//   if (res.data.code == 200) {
//     tot.value = res.data.data.total;
//     otherData.value = res.data.data.records;
//     // console.log(otherData.value, "音频");
//     otherData.value.forEach((item) => {
//       item.list = JSON.parse(item.bizContent);
//     });
//   }
// };
// 今日动态
const audioPlayer = new Audio();
const scrollContainer = ref(null);
const isplay = ref(null);
const loading = ref(false); // 管理异步加载状态
let tot = ref(0);
// const getNews = async () => {
//   if (loading.value) return; // 防止重复调用
//   loading.value = true;
//   let res = await getTodayNoticesApi(pageI.value, pageS.value);
//   if (res.data.code === 200) {
//     tot.value = res.data.data.total;
//     const newRecords = await Promise.all(
//       res.data.data.records.map(async (item) => {
//         item.list = JSON.parse(item.bizContent);
//         if (item.list.type === 2) {
//           let urs = '/vocalfile'
//           let duration = await getAudioDuration(urs + item.list.videoUrl);
//           let minutes = Math.floor(duration / 60);
//           let seconds = Math.floor(duration % 60);
//           item["duration"] = `${minutes}'${seconds}''`;
//         }
//         return item; // 确保返回 item，无论是否处理音频
//       })
//     );
//     otherData.value.push(...newRecords.filter(x => x)); // 过滤 undefined
//     console.log(otherData.value , '111125555');
//     if (otherData.value.length >= tot.value) {
//       stop(); // 停止无限滚动监听
//     } else {
//       pageI.value++;
//     }
//   }
//   loading.value = false; // 请求结束后设置 loading 为 false
// };
const getNews = async () => {
  if (loading.value) return; // 防止重复调用
  loading.value = true;
  try {
    let res = await getTodayNoticesApi(pageI.value, pageS.value);
    console.log(res , '今日动态');
    
    if (res.data.code === 200) {
      tot.value = res.data.data.total;
      const newRecords = await Promise.all(
        res.data.data.records.map(async (item) => {
          try {
            item.list = JSON.parse(item.bizContent);
            if (item.list.type === 2) {
              // let urs = "/vocalfile";
              let duration = await getAudioDuration(item.list.videoUrl);
              let minutes = Math.floor(duration / 60);
              let seconds = Math.floor(duration % 60);
              item["duration"] = `${minutes}'${seconds}''`;
            }
          } catch (error) {
            console.error("Error processing item", item, error);
            return null;
          }
          return item; // 确保返回 item，无论是否处理音频
        })
      );
      otherData.value.push(...newRecords.filter((x) => x)); // 过滤 undefined 或 null
      if (otherData.value.length >= tot.value ) {
        stop(); // 停止无限滚动监听
      } else {
        pageI.value++;
      }
    }
  } catch (error) {
    console.error("加载失败", error);
  } finally {
    loading.value = false; // 请求结束后设置 loading 为 false
  }
};

const { pause: stop } = useInfiniteScroll(scrollContainer, getNews, {
  distance: 100,
});

const playAudio = (item) => {
  // 设置新的音频源
  audioPlayer.src = item.videoUrl;
  // let usr = "/src/assets/nljk-img/sy.wav";
  // audioPlayer.src = usr;
  // 加载并播放音频
  audioPlayer.load();
  if (isplay.value == item.id) {
    isplay.value = null;
    audioPlayer.pause();
  } else {
    isplay.value = item.id;
    audioPlayer.play();
    audioPlayer.addEventListener("ended", function () {
      isplay.value = null;
      console.log("音频播放完毕！");
    });
  }
};
// 音频
function getAudioDuration(url) {
  // console.log(url , 'url');
  return new Promise((resolve, reject) => {
    const audio = new Audio();
    // 设置音频源
    audio.src = url;
    // 当音频元数据加载完成时，可以访问duration属性s
    audio.addEventListener("loadedmetadata", function () {
      // 注意：duration可能为NaN，如果音频未完全加载或信息不可用
      if (!isNaN(audio.duration)) {
        resolve(audio.duration);
      } else {
        reject("无法获取音频时长");
      }
    });
    // 处理可能的错误
    audio.onerror = function (error) {
      reject(`音频加载错误: ${error}`);
    };
    // 为了确保浏览器开始加载音频，可以在这里手动播放音频（静音）
    audio.crossOrigin = "anonymous"; // 请求带有CORS头
    setTimeout(function () {
      audio
        .play()
        .then(() => {
          audio.pause(); // 立即暂停，只是为了触发加载
        })
        .catch(reject);
    }, 500);
  });
}
const btn_point = (item) => {
  console.log(item, "item");
  mapspc.value.bindGraphicDemo1(item, "myswPop");
};
// 动态统计
const getDynamic = async () => {
  let res = await getDynamicStatApi();
  // console.log(res, "动态统计");
  jayData.value = res.data.data;
};
//视频播放
let hikId = ref("");
let imei = ref("");
const mtaids = async (data) => {
  hikId.value = data.pb.hikId;
  imei.value = data.pb.imei;
  aidsname.value = data.pb.deviceName;
  const res = await plays(hikId.value);
  Isaids.value = true;
  console.log(Isaids.value, "弹窗");
  if (res.data.code == 200) {
    let originalUrl = res.data.data.fmp4;
    let newBase = "https://qilihai.baohuqu.net:8080/gb";
    function replaceBaseUrl(url, newBase, separator) {
      let index = url.indexOf(separator);
      if (index !== -1) {
        // 截取到'/QLHSD'之前的部分
        let newUrl = newBase + url.substring(index);
        return newUrl;
      } else {
        console.log(`标识符 '${separator}' 未找到`);
        return url; // 如果没有找到分隔符，返回原始 URL
      }
    }
    jkUrl.value = replaceBaseUrl(originalUrl, newBase, "/rtp");
    console.log(jkUrl.value , 'jkUrl.value');
  } else {
    ElMessage({
      message: res.data.msg,
      type: "warning",
    });
  }
};
// 云台控制
const Czi = async (order) => {
  let obj = {
    command: order,
    horizonSpeed: "50",
  };
  if (order == "stop") {
    let res = await NewgetPtzControlApi3(hikId.value, "up", obj.horizonSpeed);
  } else {
    let res = await NewgetPtzControlApi2(
      hikId.value,
      obj.command,
      obj.horizonSpeed
    );
  }
  // let res = await getPtzControlApi(channelNumber, serialNumbers, obj.command, obj.horizonSpeed)
};
// 查看详情切换
const btn_toggle = (id) => {
  flag.value = id;
  if (id == 1) {
    getMonitoringDynamic(imei.value);
  } else if (id == 2) {
    getMonthtype();
    getmonitorquantity();
    getEventscale();
    getMonth();
    getArticle();
    getMonitor();
  }
};
// 监测动态
let total = ref(0);
const getMonitoringDynamic = async (channelNo) => {
  let res = await getDeviceMonitorApi(
    channelNo,
    pageIndex.value,
    pageSize.value
  );
  // console.log(res, "监测动态");
  if (res.data.code == 200) {
    monitorData.value = res.data.data.records;
  }
  total.value = res.data.data.total;
};
const handleSizeChange = () => {
  getMonitoringDynamic(imei.value);
};
const handleSize = () => {
  getNews();
};
const handleCurrentChange = () => {
  getMonitoringDynamic(imei.value);
};
const handleCurrent = () => {
  getNews();
};
// 获取时间
const getYear = (val) => {
  value3.value = val.getFullYear() + "";
  getMonthtype();
  getmonitorquantity();
  getEventscale();
  getMonth();
  getArticle();
  getMonitor();
};
// 不能选择未来时间
const pickerOptions = (time) => {
  return new Date().getFullYear() < time.getFullYear();
};
// 设备累计事件条数
let article = ref([]);
const getArticle = async () => {
  let res = await getDeviceTotalCountApi(value3.value, imei.value);
  // console.log(res, "leiji");
  article.value = res.data.data.species;
};
// 监测统计
// 各物种监测数量
let quantity = ref([]);
const getmonitorquantity = async () => {
  let res = await getCategoryApi(value3.value, imei.value);
  let arr = res.data.data;
  quantity.value = res.data.data;
  // 循环遍历数组中的每个对象
  let transformedData = arr.map((item) => {
    // 将title属性改为name，将noticeNumber属性改为value
    return {
      name: item.speciesName,
      value: item.speciesNumber,
    };
  });
  /*   if (value3.value == '2023') {
      option3.series[0].center = ['30%', '50%']
      option3.legend.right = '15%'
    }
    if (value3.value == '2024') {
      if (viewportHeight.value == 1080) {
        option3.series[0].center = ['13%', '50%']
      } else {
        option3.series[0].center = ['15%', '50%']
      }
      option3.legend.right = '1%'
    } */
  option3.series[0].data = transformedData;
};
const option3 = reactive({
  tooltip: {
    trigger: "item",
  },
  legend: {
    type: "scroll",
    orient: "horizontal", // 设置图例布局为垂直显示
    top: "10", // 居中对齐
    textStyle: {
      color: "#fff",
      fontSize: ".12rem",
    },
    pageTextStyle: {
      color: "#fff", // 设置滑块数字颜色为红色
    },
    pageIconColor: "#fff", // 设置滑块颜色为绿色
  },

  series: [
    {
      name: "物种数量",
      type: "pie",
      center: ["50%", "60%"],
      radius: ["50%", "70%"],
      // 调整饼图位置
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: "inside",
        formatter: `{d}`,
        color: "#fff",
        fontSize: ".14rem",
      },
      labelLine: {
        show: false,
      },
      data: [],
    },
  ],
});
// 各保护级别监测数量
let scaledata = ref([]);
const getEventscale = async () => {
  let res = await getLevelApi(value3.value, areaId, imei.value);
  // console.log(res, "监测数量");
  let arr = res.data.data;
  scaledata.value = res.data.data;
  option4.xAxis[0].data = Object.values(arr).map((item) =>
    item.speciesLevel.toString()
  );
  option4.series[0].data = Object.values(arr).map((item) =>
    item.speciesNumber.toString()
  );
};
const option4 = reactive({
  tooltip: {
    trigger: "item",
  },
  grid: {
    top: "10%",
    right: "3%",
    left: "13%",
    bottom: "20%",
  },
  xAxis: [
    {
      type: "category",
      color: "#59588D",
      // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      data: [],
      axisPointer: {
        type: "line",
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        interval: 0,
        color: "rgba(255, 255, 255, 0.80)",
        fontSize: ".14rem",
      },
      lineStyle: {
        color: "rgba(255, 255, 255, 0.80)",
        width: 1,
        type: "solid",
      },
    },
  ],
  yAxis: [
    {
      // min: 0,
      // max: 100,
      axisLabel: {
        show: true,
        interval: 0,
        color: "rgba(255, 255, 255, 0.80)",
        fontSize: ".14rem",
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: "#40658c",
        },
      },
    },
  ],
  series: [
    {
      type: "bar",
      // data: [100, 90, 10, 90, 90, 20, 56, 89, 92, 20, 57, 82],
      data: [],
      barWidth: "30%",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "rgba(10,208,161, 1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(10,208,161, 0.1)", // 100% 处的颜色
            },
          ],
          false
        ),
        borderRadius: [10, 10, 0, 0],
        // shadowColor: 'rgba(0,255,225,1)',
        // shadowBlur: 4,
      },
    },
  ],
});
// 每月监测数量
const getMonitor = async () => {
  let res = await getMonthApi(value3.value, imei.value);
  // console.log(res, "每月");
  option5.xAxis[0].data = res.data.data.months;
  option5.series[0].data = res.data.data.notices;
};
const option5 = reactive({
  tooltip: {
    trigger: "item",
  },
  grid: {
    top: "10%",
    right: "3%",
    left: "7%",
    bottom: "20%",
  },
  xAxis: [
    {
      type: "category",
      color: "#59588D",
      // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      data: [],
      axisPointer: {
        type: "line",
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        interval: 0,
        color: "rgba(255, 255, 255, 0.80)",
        fontSize: ".14rem",
      },
      lineStyle: {
        color: "rgba(255, 255, 255, 0.80)",
        width: 1,
        type: "solid",
      },
    },
  ],
  yAxis: [
    {
      // min: 0,
      // max: 100,
      axisLabel: {
        show: true,
        interval: 0,
        color: "rgba(255, 255, 255, 0.80)",
        fontSize: ".14rem",
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: "#40658c",
        },
      },
    },
  ],
  dataZoom: [
    {
      //添加dataZoom属性即可显示滑动条S
      orient: "horizontal",
      show: true, //控制滚动条显示隐藏
      realtime: true, //拖动滚动条时是否动态的更新图表数据
      handleSize: 0,
      height: "3%", //滚动条高度
      start: 0, //滚动条开始位置（共6等份）
      end: 60, //滚动条结束位置
      top: "94%",
      // bottom: '20%',
      left: "5%", //滚动条靠左侧的百分比
      zoomLock: false, //控制面板是否进行缩放
      startValue: 0, // 从头开始。
      endValue: 5, // 一次性展示6个
      showDetail: false, // 关闭滚动条提示
      backgroundColor: "rgb(63, 116, 168 , 0.5)",
      fillerColor: "rgba(255, 255, 255,0.5)",
      zoomLock: true,
      zoomOnMouseWheel: false,
      brushSelect: false,
      showDetail: false,
      showDataShadow: false,
    },
  ],
  series: [
    {
      type: "bar",
      // data: [100, 90, 10, 90, 90, 20, 56, 89, 92, 20, 57, 82],
      data: [],
      barWidth: "30%",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "rgba(251, 214, 18, 1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(251, 214, 18, 0.1)", // 100% 处的颜色
            },
          ],
          false
        ),
        borderRadius: [10, 10, 0, 0],
        // shadowColor: 'rgba(0,255,225,1)',
        // shadowBlur: 4,
      },
    },
  ],
});
// IUCN名录监测数量
const getMonth = async () => {
  let res = await getICUNApi(value3.value, areaId, imei.value);
  let arr = res.data.data;
  option6.xAxis.data = Object.values(arr).map((item) =>
    item.speciesLevel.toString()
  );
  option6.series[0].data = Object.values(arr).map((item) =>
    item.speciesNumber.toString()
  );
};
const option6 = reactive({
  tooltip: {},
  legend: {
    icon: "circle",
    right: 30,
    top: "3%",
    textStyle: {
      color: "rgba(255, 255, 255, 0.80)",
      fontSize: ".14rem",
    },
    itemWidth: 10,
    itemHeight: 10,
    itemGap: 50,
  },
  grid: {
    top: "10%",
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    // data: ['Mon', 'Tue', 'Wed', 'Thu'],
    data: [],
    axisLine: {
      show: true,
      lineStyle: {
        color: "rgba(255, 255, 255, 0.80)",
        width: 1,
        type: "solid",
      },
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      show: true,
      interval: 0,
      color: "rgba(255, 255, 255, 0.80)",
      fontSize: ".12rem",
      // rotate: '45',
    },
  },
  yAxis: {
    type: "value",
    axisLabel: {
      show: true,
      interval: 0,
      color: "rgba(255, 255, 255, 0.80)",
      fontSize: ".14rem",
    },
    axisLine: {
      show: false,
      lineStyle: {
        width: 1,
        type: "solid",
      },
    },
    splitLine: {
      lineStyle: {
        color: "#40658c",
      },
    },
  },
  series: [
    {
      // data: [150, 230, 224, 218, 135, 147, 260],
      data: [],
      type: "line",
    },
  ],
});
// // 设备各物种停留时间统计
// let projectItemStart;
// let projectItemEnd;
// let projectItem;
// let dateMin;
// const getMonthtype = async () => {
//   let res = await getDeviceMonitorCountApi(value3.value, imei.value);
//   let arr = res.data.data;
//   console.log(arr , 'arrrr');
//   projectItem = Object.values(arr).map((item) => item.speciesName.toString());
//   option7.yAxis.data = Object.values(arr).map((item) =>
//     item.speciesName.toString()
//   );
//   console.log(option7.yAxis.data , 'option7.yAxis.data');
//   projectItemStart = Object.values(arr).map((item) => item.startDay.toString());
//   projectItemEnd = Object.values(arr).map((item) => item.endDay.toString());
//   option7.series[0].data = projectItemStart.map((item) => {
//     return new Date(item).valueOf();
//   });
//   console.log(option7.series[0].data , 'option7.series[0].data');
//   option7.series[1].data = projectItemEnd.map((item, i) => {
//     return new Date(item).valueOf() - option7.series[0].data[i];
//   });
//   console.log(option7.series[1].data , 'option7.series[1].data');
//   dateMin = option7.series[0].data.sort()[0];
//   option7.xAxis.min = option7.series[0].data.sort()[0];
//   console.log(option7.xAxis.min , 'option7.xAxis.mi');
// };
// 设备各物种停留时间统计
let projectItems, startDays, endDays, earliestStartDate;
const getMonthtype = async () => {
  try {
    // 假设 value3 和 imei 是外部定义的变量，这里仅用于示例
    let response = await getDeviceMonitorCountApi(value3.value, imei.value);
    if (!response.data || !response.data.data) {
      console.error("无有效数据返回");
      return; // 退出函数，因为没有数据可以处理
    }
    let speciesData = response.data.data;
    console.log(speciesData, "arrrr");
    // 提取物种名称、开始日期和结束日期
    projectItems = speciesData.map((item) => item.speciesName.toString());
    startDays = speciesData.map((item) => new Date(item.startDay).valueOf());
    endDays = speciesData.map(
      (item) =>
        new Date(item.endDay).valueOf() - startDays[speciesData.indexOf(item)]
    );
    // 更新图表数据
    option7.yAxis.data = [...projectItems];
    option7.series[0].data = [...startDays];
    option7.series[1].data = [...endDays];
    // 找到最小的开始日期
    earliestStartDate = Math.min(...startDays);
    option7.xAxis.min = earliestStartDate;
    // console.log(option7.yAxis.data, 'option7.yAxis.data');
    // console.log(option7.series[0].data, 'option7.series[0].data');
    // console.log(option7.series[1].data, 'option7.series[1].data');
    // console.log(option7.xAxis.min, 'option7.xAxis.min');
  } catch (error) {
    console.error("数据获取或处理中发生错误:", error);
  }
};
// const option7 = reactive({
//   tooltip: {
//     trigger: "axis",
//     formatter: function (params) {
//       var tar = params[1];
//       return (
//         tar.name +
//         "<br />" +
//         tar.seriesName +
//         " : " +
//         tar.value / (1000 * 60 * 60 * 24) +
//         "天"
//       );
//     },
//   },
//   grid: {
//     top: "3%",
//     left: "1%",
//     right: "4%",
//     bottom: "3%",
//     containLabel: true,
//   },
//   yAxis: {
//     type: "category",
//     // speciesNumber: 20,
//     minInterval: 1,
//     splitLine: {
//       show: false,
//     },
//     axisTick: {
//       show: false, // 不显示坐标轴刻度线
//     },
//     axisLabel: {
//       show: "true",
//       interval: 0.5,
//       color: "rgba(255, 255, 255, 0.80)",
//       fontSize: ".12rem",
//     },
//     axisLine: {
//       show: false,
//     },
//     splitLine: {
//       show: false, // 不显示网格线
//       // lineStyle: {
//       //   color: '#333'
//       // }
//     },
//     // data: projectItem
//     data: [],
//   },
//   xAxis: {
//     type: "value",
//     position: "top",
//     // min: dateMin,
//     min: "",
//     axisLabel: {
//       show: true,
//       interval: 0,
//       color: "rgba(255, 255, 255, 0.50)",
//       fontSize: ".14rem",
//       color: "#fff", // 坐标轴文字颜色
//       formatter: function (param) {
//         let date = new Date(param);
//         let dateLabel = date.getFullYear() + "-" + (date.getMonth() + 1);
//         return dateLabel;
//       },
//     },
//     lineStyle: {
//       color: "rgba(255, 255, 255, 0.80)",
//       width: 1,
//       type: "solid",
//     },
//   },
//   dataZoom: [
//     {
//       //添加dataZoom属性即可显示滑动条S
//       orient: "vertical",
//       maxValueSpan: 25, //显示数据的条数(默认显示10个)
//       show: true, //控制滚动条显示隐藏
//       realtime: true, //拖动滚动条时是否动态的更新图表数据
//       handleSize: 0,
//       height: "90%", //滚动条高度
//       width: ".5%",
//       start: 0, //滚动条开始位置（共6等份）
//       end: 60, //滚动条结束位置
//       top: "5%",
//       right: "1%",
//       bottom: "5%",
//       // left: '9%', //滚动条靠左侧的百分比
//       zoomLock: true, //控制面板是否进行缩放
//       startValue: 0, // 从头开始。
//       endValue: 20, // 一次性展示6个
//       showDetail: false, // 关闭滚动条提示
//       backgroundColor: "rgb(63, 116, 168 , 0.5)",
//       fillerColor: "rgba(255, 255, 255,0.5)",
//       zoomLock: true,
//       zoomOnMouseWheel: true,
//       brushSelect: false,
//       showDetail: false,
//       showDataShadow: false,
//     },
//   ],
//   series: [
//     {
//       name: "Placeholder",
//       type: "bar",
//       // barWidth: 50,
//       stack: "Total",
//       itemStyle: {
//         borderColor: "transparent",
//         color: "transparent",
//       },
//       emphasis: {
//         itemStyle: {
//           borderColor: "transparent",
//           color: "transparent",
//         },
//       },
//       // data: projectItemStartValue
//       data: [],
//     },
//     {
//       name: "周期",
//       type: "bar",
//       // barWidth: 50,
//       stack: "Total",
//       // data: projectItemDuringValue
//       data: [],
//     },
//   ],
// });

const option7 = reactive({
  tooltip: {
    trigger: "axis",
    formatter: function (params) {
      var tar = params[1];
      return (
        tar.name +
        "<br />" +
        tar.seriesName +
        " : " +
        tar.value / (1000 * 60 * 60 * 24) +
        "天"
      );
    },
  },
  grid: {
    top: "3%",
    left: "1%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  yAxis: {
    type: "category",
    minInterval: 1,
    splitLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      show: true,
      interval: 0.5,
      color: "rgba(255, 255, 255, 0.80)",
      fontSize: ".12rem",
    },
    axisLine: {
      show: false,
    },
    data: [],
  },
  xAxis: {
    type: "value",
    position: "top",
    min: "",
    axisLabel: {
      show: true,
      interval: 0,
      color: "#fff", // 颜色已在上方声明，不需要重复
      fontSize: ".14rem",
      formatter: function (param) {
        let date = new Date(param);
        let dateLabel = date.getFullYear() + "-" + (date.getMonth() + 1);
        return dateLabel;
      },
    },
    lineStyle: {
      color: "rgba(255, 255, 255, 0.80)",
      width: 1,
      type: "solid",
    },
  },
  dataZoom: [
    {
      orient: "vertical",
      maxValueSpan: 25,
      show: true,
      realtime: true,
      handleSize: 0,
      height: "90%",
      width: ".5%",
      start: 0,
      end: 100,
      top: "5%",
      right: "1%",
      bottom: "5%",
      zoomLock: true,
      zoomOnMouseWheel: true,
      brushSelect: false,
      showDetail: false,
      showDataShadow: false,
      backgroundColor: "rgb(63, 116, 168 , 0.5)",
      fillerColor: "rgba(255, 255, 255,0.5)",
    },
  ],
  series: [
    {
      name: "Placeholder",
      type: "bar",
      stack: "Total",
      itemStyle: {
        borderColor: "transparent",
        color: "transparent",
      },
      emphasis: {
        itemStyle: {
          borderColor: "transparent",
          color: "transparent",
        },
      },
      data: [],
    },
    {
      name: "周期",
      type: "bar",
      stack: "Total",
      data: [],
    },
  ],
});

const btn_edit = () => {
  Isaids.value = false;
  flag.value = 0;
};

const btn_noswsj = () => {
  if (isSwsjOn.value) return;
  isSwsjOn.value = true;
  if (mapspc.value) {
    mapspc.value.showdonghai && mapspc.value.showdonghai();
    mapspc.value.showxihai && mapspc.value.showxihai();
  }
};

const btn_yesswsj = () => {
  if (!isSwsjOn.value) return;
  isSwsjOn.value = false;
  if (mapspc.value) {
    mapspc.value.closedonghai && mapspc.value.closedonghai();
    mapspc.value.closexihai && mapspc.value.closexihai();
  }
};


</script>
<style>
@import "../static/css/Home.css";
</style>
<style scoped>
.nav_boxbf {
  width: 300px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-image: url("../assets/img/bbc.png");
  background-size: 100% 45px;
  background-position: bottom;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  cursor: pointer;
  z-index: 9;
}

.lis {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.lis_img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lis_img>img {
  max-width: 100%;
  max-height: 100%;
}

.el-table {
  --el-table-bg-color: none;
  --el-table-tr-bg-color: none !important;
  --el-table-border-color: none;
  --el-table-row-hover-bg-color: var(--el-transfer-border-color);
  --el-table-border: 1px solid rgba(255, 255, 255, 0.5) !important;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  --el-table-current-row-bg-color: none;
  /* --el-table-tr-bg-color:none */
}

.el-carousel__item {
  display: flex !important;
}

.el-table__expanded-cell {
  --el-table-bg-color: none;
  color: #93dcfe;
  font-size: 0.24rem;
  font-weight: 700;
}

.el-table th.el-table__cell {
  background: rgba(248, 72, 72, 0.2) !important;
  height: 0.58rem;
}

.el-table-column {
  color: #fff !important;
}

.el-table .cell {
  padding: 0;
  text-align: center;
  font-size: 0.14rem;
}

:root {
  --el-border-color: rgba(230, 247, 255, 0.2);
}

.el-table,
.el-table th.el-table__cell.is-leaf {
  border-bottom: none !important;
}

.bigVideo>.el-table th.el-table__cell {
  background: rgba(60, 237, 255, 0.4) !important;
}

.bigVideo>.el-table thead {
  color: #fff !important;
}

.bigVideo>.el-table {
  --el-table-border: 1px solid rgba(230, 247, 255, 0.2) !important;
}

.el-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.4rem;
}

.el-pagination__sizes {
  color: #fff;
}

:root {
  --el-fill-color-blank: none;
  --el-text-color-regular: #fff;
}

.bigVideo>tbody>tr {
  height: 1.1rem;
}

.el-pagination button {
  color: #fff !important;
}

.el-pager li.is-active {
  background-color: rgba(60, 237, 255, 1) !important;
}

.el-pager li {
  margin: 0 0.02rem;
  color: #fff !important;
}

.el-pagination__total {
  color: #fff !important;
}

.el-select__caret {
  color: #fff !important;
}

.el-dropdown-menu__item:not(.is-disabled) {
  color: aqua;
}

/* 时间选择器 */
.el-date-picker {
  --el-datepicker-text-color: #fff;
}

.el-picker__popper {
  --el-datepicker-border-color: rgba(102, 225, 252, 0.5);
}
</style>

<style>
.el-date-editor.el-input {
  width: 100% !important;
}

.el-input {
  --el-input-bg-color: none;
  --el-input-border-color: rgba(102, 225, 252, 0.5);
}

:root {
  --el-bg-color-overlay: linear-gradient(180deg,
      #052548 0%,
      rgba(31, 80, 134, 0.4) 100%) !important;
  --el-text-color-regular: #fff !important;
  --el-border-color-lighter: rgba(102, 225, 252, 0.5) !important;
  --el-fill-color-light: none !important;
  --el-fill-color-blank: linear-gradient(180deg,
      rgba(33, 88, 148, 0.1) 0%,
      rgba(33, 88, 148, 1) 100%) !important;
}

.el-date-picker {
  --el-datepicker-text-color: #fff;
}

.el-picker__popper {
  --el-datepicker-border-color: rgba(102, 225, 252, 0.5);
}

.el-tree {
  width: 1.86rem;
}

.el-checkbox.el-checkbox--large {
  height: 0.3rem;
}

.el-checkbox.el-checkbox--large .el-checkbox__label {
  font-size: 0.14rem;
}

.demo {
  width: 100%;
  height: 100%;
}

.wav {
  width: 500px;
  height: 557px;
  background-color: #000;
  margin: 100px auto;
  border: 1px solid #000;
}

/* .box {
  width: 100%;
  height: 400px;
  margin: 50px;
  border-radius: 40px;
  position: relative;
  background-color: #fff;
  overflow: hidden;
} */

.ico {
  width: 300px;
  height: 300px;
  margin: 50px;
  border-radius: 50%;
  background-color: #000;
  animation: rotate 5s linear infinite;
  overflow: hidden;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.pointer {
  width: 200px;
  height: 10px;
  border-radius: 10px;
  position: absolute;
  top: 50px;
  right: 30px;
  transform-origin: top right;
  transform: rotate(270deg);
  background-color: green;
}

.aninms {
  animation: ptr 1s ease-in-out forwards;
}

.fins {
  animation: pins 1s ease-in-out forwards;
}

@keyframes ptr {
  0% {
    transform: rotate(270deg);
  }

  100% {
    transform: rotate(300deg);
  }
}

@keyframes pins {
  0% {
    transform: rotate(300deg);
  }

  100% {
    transform: rotate(270deg);
  }
}

#my-audio {
  width: 100%;
}

.aplayer .aplayer-info {
  background-color: #e5f6ff;
}
</style>
